import React, { Component } from 'react'
import { Tabs,Row,Col,Tooltip  } from 'antd';
import { Table } from 'antd';
import './index.less'
import Http from '../../../axios'
import CollapseCard from './collapseCard'
import PersonnelItemList from './PersonnelItemList'
import QueueAnim from 'rc-queue-anim';
const TabPane = Tabs.TabPane;

export default class Culture extends Component {
  state = {
    personList:[],
    achievementList:[],
    achievements:[],
    currentPage: 1,
    pageSize: 10,
    searchKey: ''
  }
  
  componentWillMount() {
    this.getUserList();
    this.achievementList();
  }
  queryDtails=()=>{
    alert(1)
  }
  onShowSizeChange=(current, pageSize)=>{
    console.log(current, pageSize);
  }
  getUserList = () => {
    Http.request({
      url: `/user/list`
    }).then((resData) => {
      
      this.setState({
        personList: resData.data.list,
        
      })
     
    })
  }
  achievementList = () => {
    Http.request({
      //url:`/achievement/list/${this.state.currentPage}/${this.state.pageSize}`,
      url:"/achievement/list/",
      method: 'get',
      params:{
        page:this.state.currentPage,
        size:this.state.pageSize,
      }
    }).then((resData) => {
      console.log(resData)
      this.setState({
        achievementList: resData.data
      })
     
    })
  }
  pageChange = (page, pageSize) => {
    this.setState({
      currentPage: page,

      pageSize
    })
    setTimeout(() => {
      this.achievementList();
    }, 0);
  }
  sizeChange = (current, size) => {
    this.setState({
      currentPage: current - 1,
      pageSize: size
    })
    setTimeout(() => {
      this.achievementList();
    }, 0);
  }
  render() {
    const columns = [{
      title: '名称',
      dataIndex: 'name',
      key: 'name',
    }, {
      title: '描述',
      dataIndex: 'memo',
      key: 'memo',
    }, {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
    }];
    return (
      <section className="base-section">
        <Tabs defaultActiveKey="1" onChange={this.tabChange}>
          <TabPane tab="员工列表" key="1">
          <CollapseCard className="collapse-card">
                <Row gutter={20} key="test" className="list">
                  <QueueAnim duration={300}>
                
                    {
                      this.state.personList.map((item, index) => 
                        <Col span={8} key={index} className="col-anmi">
                          <PersonnelItemList data={item}></PersonnelItemList>
                        </Col>
                      )
                    }  
                  </QueueAnim>
                </Row>
          </CollapseCard>
            
          </TabPane>
          <TabPane tab="成就规则" key="2">
            
            <Row>
              <Table columns={columns} dataSource={this.state.achievementList.records} onRowClick={this.viewWeekly}
              pagination={{defaultPageSize: 10, onChange: this.pageChange, total: this.state.achievementList.total ,showSizeChanger: true,onShowSizeChange: this.sizeChange}} />
             
                
            </Row>
          </TabPane>
        </Tabs>
      </section>
      
    )
  }
}
